<template>
  <div class="template1 cityArea">
    <div class="leftNav">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" node-key='id' :default-expanded-keys='defaultKeys'></el-tree>
    </div>
    <div class="subject" :style="'width:84%;height:'+(height+120)+'px'">
      <div class="head" id="head1">
        <div class="tit">
            {{title}}
          <span class="add" @click="addCityArea('add')">添加商圈</span>
        </div>
      </div>
      <el-main style="height:100% !important">
          <el-table :data="tableData" fit border size="mini">
              <el-table-column type="index" label="序号" width="80"></el-table-column>
              <el-table-column prop="name" label="商圈名称"></el-table-column>
              <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                      <el-button type="text" size="small" @click="addCityArea('edit',scope.row)">修改</el-button>
                      <el-button type="text" size="small" @click="closeDeal(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </el-main>
    </div>
    <addCityArea></addCityArea>
  </div>
</template>
<script>
import addCityArea from './addCityArea.vue'
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      data: [],
      data1:[],
      tableData: [],
      defaultKeys:[2],
      defaultProps: {
        children: "children",
        label: "label"
      },
      height: "",
      formInline: {
        user: "",
        region: ""
      },
      title:'杭州',
      tree:{id:1}
    };
  },
  created(){
    this.selectList()
    this.$root.$on("saveCityArea", data => {
      this.getTable()
    })
  },
  methods: {
    handleNodeClick(tree) { //tree点击事件
      this.title=tree.name
      this.tree=tree
      this.getTable()
    },
    selectList() {
      let url = "city/area";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          let data=res
          let arr=[]
          if(res){
            for(let i=0,len=data.length;i<len;i++){
              data[i].children=[]
              data[i].label=data[i].name
              if(data[i].level==1){
                arr.push(data[i])
              }else{
                for(let j=0,leng=arr.length;j<leng;j++){
                  if(data[i].parentId==arr[j].id){
                    arr[j].children.push(data[i])
                  }else{
                    // for(let k=0,le=arr[j].children.length;k<le;k++){
                    //   if(data[i].parentId==arr[j].children[k].id){
                    //     arr[j].children[k].children.push(data[i])
                    //   }
                    // }
                  }
                }
              }
            }
            that.data=arr
            that.data1=res
            console.log(arr)
          }
        }
      })
    },
    closeDeal(row){
        let that=this
        request.delAlert({
            name:'删除该商圈',
            that,
            fn(obj){
                let url='city/area/'+row.id+'?greenToken='+request.greenToken
                request.ajaxDel({
                    url,
                    that,
                    fn(res){
                        that.$message(obj)
                        that.getTable()
                    }
                })
            }
        })
    },
    addCityArea(type,row){
        let obj=this.tree
        console.log(obj)
        this.$root.$emit("addCityArea",type,obj,row)
    },
    getTable(){
      let url = "city/area/three";
      let obj={secondId:this.tree.id}
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        params:obj,
        fn(res){
          that.tableData=res
        }
      })
    },
    saveCityArea(){
      this.$root.$emit("saveCityArea",'no')
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    console.log(height);
    this.height = parseInt(height) - 182;
  },
  components:{
    addCityArea,    //添加商圈
  },
};
</script>
<style scoped lang="less">
    @import "../template1.less";
</style>
<style lang="less" scoped>
.cityArea{
    .subject{
        padding-bottom: 0px;    
        padding-top: 60px;
    }
}
</style>

